<!-- 教师班级 -->
<template>
    <div class="class-page" @scroll="scrollLoad()" ref="report">
        <div class="class-main">
            <!-- 任务 -->
            <div class="report-top clearfix">
                <div class="module-title left">班级阅读打卡计划</div>
                <span class="right" @click="classMaskShow=true">{{thisClass.name}}</span>
            </div>
            <div class="task-card">
                <ul>
                    <li class="clearfix shadow3" v-for="(item,index) in taskList" :key="index" @click="goDetail(item)">
                        <div :class="['state',{'clock-in':item.checkInTask.taskCategory!=2},{'test-in':item.checkInTask.taskCategory==2}]">{{item.checkInTask.taskCategory==2 ? '考试中' : '打卡中'}}</div>
                        <img class="card-img left" :src="item.book.bookCover" alt="">
                        <div class="card-con left">
                            <h4>{{item.book.bookName}}</h4>
                            <div v-if="item.checkInTask.taskCategory!=2">
                                <p>{{item.checkInTask.dayCount}}天阅读计划的第{{item.checkInTask.countday}}天</p>
                                <div class="in-progress" ref="in-progress">
                                    <div class="in-elapse" ref="in-elapse" :style="'width:'+ item.checkInTask.percent +'%;'"></div>
                                </div>
                            </div>
                            <div class="test-data clearfix" v-if="item.checkInTask.taskCategory==2">
                                <div class="data-item left iscomp">
                                    <em>{{item.otherInfo[0].completeCount}}</em>
                                    <span>已完成</span>
                                </div>
                                <div class="data-item left nocomp">
                                    <em>{{item.otherInfo[0].allCount-item.otherInfo[0].completeCount}}</em>
                                    <span>未完成</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul> 
                <div :class="['btn-more',{'btn-less':!isEllipsis}]" v-if="taskListJson.length>2" @click="moreFun()">{{isEllipsis ? '展开全部':'收起计划'}}</div>
                <transition name='fade'>
                    <div class="no-con small" v-show="noTaskShow">
                        <img src="@/assets/img/no-con.png" alt="">
                        <p>暂无阅读计划...</p>
                    </div>
                </transition> 
            </div>
            <!-- 荣誉榜 -->
            <div class="rank">
                <div class="module-title clearfix" v-show="rankList.length>0"><span class="left">阅读荣誉榜</span><span class="right rank-more" @click="goRank()">查看全部</span></div>
                <ul class="clearfix">
                    <li class="left" v-for="(item,index) in rankList" :key="index">
                        <div :class="['avatar-box','avatar'+index]">
                            <img :src="item.Avatar ? item.Avatar: $parent.headError" :onerror="$parent.headError" alt="">
                            <span>{{item.TrueName}}</span>
                        </div>
                        <p>{{item.Integral}}分</p>
                    </li>
                </ul>
            </div>
            <!-- 动态 -->
            <div class="dynamic">
                <div class="module-title">班级动态</div>
                <!-- 时间轴列表 -->
                <div class="time-axis">
                    <ul class="day-list">
                        <li class="shadow3" v-for="(list,index) in dynamicList" :key="index">
                            <div class="day" v-show="list.dateShow">
                                <span>{{list.date}}</span>
                                <i>{{list.month}}月</i>
                            </div>
                            <div class="user-info">
                                <img :src="list.pushInfo.fromUserAvatar ? list.pushInfo.fromUserAvatar: $parent.headError" :onerror="$parent.headError" alt="">
                                <span>{{list.pushInfo.fromUserTrueName}}</span>
                            </div>
                            <h4 v-if="[3,4,5,6].includes(list.pushInfo.pushCategory)">{{list.pushInfo.description}}</h4>
                            <h4 v-if="list.pushInfo.pushCategory==1">评论了 {{list.pushInfo.toUserTrueName}} 关于《{{list.bookInfo.bookName}}》的读后感</h4>
                            <!-- 书评 -->
                            <div class="is-review" v-if="[0,2].includes(list.pushInfo.pushCategory)">
                                <h4 @click="goReview(list)" v-if="list.pushInfo.pushCategory==0">发表了关于《{{list.bookInfo.bookName}}》的读后感</h4>
                                <h4 @click="goReview(list)" v-if="list.pushInfo.pushCategory==2">点赞了 {{list.pushInfo.toUserTrueName}} 关于《{{list.bookInfo.bookName}}》的读后感</h4>
                                <p @click="goReview(list)" v-show="list.readingExperience.experienceContent">{{list.readingExperience.experienceContent}}</p>
                                <div class="review-page" v-show="list.readingExperience.pageInterval"><span>{{list.readingExperience.pageInterval}}</span></div>
                            </div>
                        </li>
                    </ul> 
                    <transition name='fade'>
                        <div class="no-con small" v-show="noConShow">
                            <img src="@/assets/img/no-con.png" alt="">
                            <p>暂无书评...</p>
                        </div>
                    </transition> 
                    <div class="bottom-tips">{{bottomTip}}</div>   
                </div>
            </div>
        </div>
        <!-- 选班级 -->
        <ClassMask :classMaskShow="classMaskShow" :classChose="classChose" :classList="classList" @classClose="classMaskShow=false" @classChoseFun="classChoseFun"></ClassMask>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'
import ClassMask from '@/components/ClassMask'

export default {
    name: "classTeacher",
    components:{
        ClassMask,
    },
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            // 选班
            classList:this.$parent.myInfo.classJson?this.$parent.myInfo.classJson:[],
            thisClass:{},
            classChose:0,
            classMaskShow:false,
            noTaskShow:false,
            taskList:[],
            taskListJson:[],
            isEllipsis:true, //简介是否省略
            rankList:[],
            dynamicList:[],      //书评列表
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=true;
        this.$parent.menuChose=5;
        //班级
        // console.log(this.classList)
        
        /****** 验证登录 *****/ 
		if(!sessionStorage.getItem("myInfo")){
			this.$router.replace({path:'/',query: {}});
		}else{
            if(sessionStorage.getItem("thisClass")){
                this.classChose=parseInt(sessionStorage.getItem("classChose"))
                this.thisClass=JSON.parse(sessionStorage.getItem("thisClass"))
            }else{
                this.thisClass=this.classList[0]
            }
            this.getTaskList()
            this.getRankLsit()
            this.getDynamic(1)
        }
        
    },
    mounted(){
    },
    destroyed(){
        touchTrue()
    },
    methods:{
        //去详情
        goDetail(item){
            sessionStorage.setItem("thisBook",JSON.stringify(item.book))
            
            if(item.checkInTask.taskCategory==2){
                this.$router.push({path:'/testState',query: {bookid:item.book.bookId}});
            }else{
                this.$router.push({path:'/bookDetail',query: {bookid:item.book.bookId}});
            }
            
        },
        goRank(){
            if(this.rankList.length>0){
                this.$router.push({path:'/classRank',query: {}}); 
            }else{
                this.$LayerTip({
                    content:"暂无数据",
                    time:1000,
                });
            }
        },
        goReview(list){
            let item=list.readingExperience
            item.avatar=list.pushInfo.fromUserAvatar
            item.trueName=list.pushInfo.fromUserTrueName

            sessionStorage.setItem("thisReview",JSON.stringify(item))
            this.$router.push({path:'/review',query: {bookid:item.bookId,reviewid:item.experienceId}});
        },
        // 展开任务列表
        moreFun(){
            this.isEllipsis=!this.isEllipsis
            if(this.isEllipsis){
                this.taskList = this.taskListJson.slice(0,2)
            }else{
                this.taskList = this.taskListJson
            }
        },
        //任务列表
        getTaskList(){
            axGet('GetUserTask', {
               userId:this.userid,
               ClassCode: this.thisClass.code,
            }).then(res => {
                if(res.ResultCode===1 && res.Value){
                    this.taskListJson=res.Value
                    this.taskListJson.length==0 ? this.noTaskShow=true : this.noTaskShow=false

                    this.taskListJson.forEach((item,i)=>{
                        let time = item.checkInTask.createTime.slice(0,10)
                        let count = this.getCount(time)
                        let percent = count > item.checkInTask.dayCount ? 100 : (count/item.checkInTask.dayCount*100);
                        this.$set(item.checkInTask,'countday',count)
                        this.$set(item.checkInTask,'percent',percent)
                    })
                    this.taskList = this.taskListJson.slice(0,2)
                    
                }else{
                    console.log('GetUserTask接口错误')
                }
            })
        },
        getCount(time) {
            let counttime = new Date().getTime() - new Date(time).getTime()
            let countday = Math.ceil(counttime / 1000 / 60 / 60 / 24)
            return countday
        },
        // 请求班级排行
        getRankLsit(){
            axGet('GetClassIntegral', {
               ClassCode:this.thisClass.code
            }).then(res => {
                if(res.ResultCode===1){
                    this.rankList=res.Value.slice(0,3)
                    sessionStorage.setItem("thisRankLsit",JSON.stringify(res.Value))
                }
            })
        },
        //请求动态列表
        getDynamic(page){
            axGet('GetClassPushMesage', {
                userId:this.userid,
                ClassCode: this.thisClass.code,
                PageIndex: page,
                PageSize:10,
            }).then(res => {
                if(res.ResultCode==1 && res.Value){
                    // 0心得 // 1评论 // 2心得点赞// 3评论点赞 // 4创建任务 // 5打卡日志 // 6答题
                    let listJson=res.Value.list ? res.Value.list:[]
                    this.addData(listJson)
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.dynamicList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false;
                    if(page==1){
                        this.noConShow=true
                    } 
                }
            })
        },
        // 数据组装
        addData(listJson){
            // console.log(listJson)
            listJson.forEach((item,i)=>{
                item.Date=item.pushInfo.createTime.substring(0,10)
                let month=0
                let date=0
                if(item.Date.charAt(5)==0){
                    month=item.Date.substring(6,7)
                }else{
                    month=item.Date.substring(5,7)
                }
                if(item.Date.charAt(8)==0){
                    date=item.Date.substring(9,10)
                }else{
                    date=item.Date.substring(8,10)
                }
                item.month=month;
                item.date=date;
                item.voiceOn=false;
                item.dateShow=true;
                this.dynamicList.push(item)
            })
            for(let i=0;i<this.dynamicList.length;i++){
                if(i+1<this.dynamicList.length){
                    if(this.dynamicList[i].Date==this.dynamicList[i+1].Date){
                        this.dynamicList[i+1].dateShow=false;
                    }
                }else if(this.dynamicList.length>1){
                    if(this.dynamicList[this.dynamicList.length-1].Date==this.dynamicList[this.dynamicList.length-2].Date){
                        this.dynamicList[this.dynamicList.length-1].dateShow=false;
                    } 
                }
            }
        },
        // 班级选择
        classChoseFun(item,index){
            if(this.classChose!=index){
                this.classChose=index
                this.thisClass=item
                sessionStorage.setItem("classChose",index)
                sessionStorage.setItem("thisClass",JSON.stringify(item))
                
                this.taskList=[]
                this.taskListJson=[]
                this.isEllipsis=true
                this.noTaskShow=false
                this.getTaskList()

                this.rankList=[]
                this.getRankLsit()

                this.dynamicList=[]
                this.noConShow=false
                this.listPage=1
                this.totalPage=1
                this.bottomTip=''
                this.isLoading=true
                this.getDynamic(1)
                
                this.classMaskShow=false;
            }
        },
        // 滚动加载   
        scrollLoad(){
            let bodyH = this.$refs['report'].clientHeight;
            let scrollH = this.$refs['report'].scrollTop;
            let listH = this.$refs['report'].scrollHeight;
            // console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getDynamic(page)
                }else{
                    if(this.dynamicList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    } 
                }
            }
        }, 
        
    }
}
</script>
<style type="text/css" scoped>
.task-card li{
    overflow: hidden;
}
.class-page{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.class-main{
    padding: 0.54rem 0.32rem 0.2rem;
}
.report-top{
    position: relative;
}
.report-top span{
    line-height: 0.36rem;
    padding-right: 0.4rem;
    color: #02affe;
    font-size: 0.3rem;
    background: url(~@/assets/img/icon/change-blue.png) no-repeat right center;
    background-size: 0.28rem 0.28rem;
}
.state{
    width: 1.5rem;
    height: 0.6rem;
    box-sizing: border-box;
    padding: 0.1rem 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    border-bottom-right-radius:0.4rem; 
}
.state.clock-in{
    background: #85cd0d;
}
.state.test-in{
    background: #ff7100;
}
.btn-more{
    color: #01a0fe;
    font-size: 0.28rem;
    height: 0.68rem;
    line-height: 0.68rem;
    background: url(~@/assets/img/icon/more.png) no-repeat center right;
    background-size: 0.32rem 0.32rem;
    width: 1.56rem;
    margin: 0 auto;
}
.btn-less{
    background: url(~@/assets/img/icon/less.png) no-repeat center right;
    background-size: 0.32rem 0.32rem;
}
.rank{
    padding: 0.58rem 0 0.86rem;
}
.rank-more{
    font-size: 0.3rem;
    color: #999;
    font-weight: normal;
}
.rank li{
    width: 33.33%;
    text-align: center;
    padding-top: 0.36rem;
}
.rank li p{
    color: #666;
    font-size: 0.3rem;
    line-height: 1;
    padding-top: 0.22rem;
}
.avatar-box{
    width: 1.8rem;
    padding-top: 0.26rem;
    background: no-repeat center bottom 0.12rem;
    background-size: 1.8rem 0.46rem;
    position: relative;
    margin: 0 auto;
}
.avatar-box img{
    width: 1.44rem;
    height: 1.44rem;
    
}
.avatar-box span{
    width: 1.5rem;
    box-sizing: border-box;
    display: block;
    color: #fff;
    font-size: 0.26rem;
    line-height: 1;
    padding: 0.12rem 0.2rem;
    border-radius: 0.1rem;
    white-space:nowrap; 
	overflow: hidden;
    text-overflow:ellipsis;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -0.75rem;
}
.avatar-box.avatar0{
    background-image: url(~@/assets/img/main/rank-bg0.png),url(~@/assets/img/main/crown.png);
    background-size: 1.8rem 0.46rem,0.64rem 0.62rem;
    background-position: center bottom 0.12rem,0 0;
    background-repeat: no-repeat,no-repeat;
}
.avatar1{
    background-image: url(~@/assets/img/main/rank-bg1.png);
}
.avatar2{
    background-image: url(~@/assets/img/main/rank-bg2.png);
}
.avatar0 img{
    border:0.08rem solid #ff7100;
    border-radius: 50%;
}
.avatar1 img{
    border:0.08rem solid #ffa800;
    border-radius: 50%;
}
.avatar2 img{
    border:0.08rem solid #85cd0d;
    border-radius: 50%;
}
.avatar0 span{
    background: #ff7100;
}
.avatar1 span{
    background: #ffa800;
}
.avatar2 span{
    background: #85cd0d;
}
.nocomp{
    padding-left: 0.42rem;
}
.data-item{
    width: 1.4rem;
    padding-top: 0.12rem;
    box-sizing: border-box;
}
.data-item em{
    display: block;
    font-size: 0.42rem;
    font-weight: bold;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #02affe;
    text-align: center;
    padding-bottom: 0.1rem;
}
.data-item span{
    display: block;
    color: #8d9db1;
    font-size: 0.3rem;
    border-right:1px solid #e0e0e0;
}
.iscomp em{
    padding-right: 0.42rem;
    
}
.nocomp em{
    color: #ff7100;
}
.data-item:last-child span{
    border: 0;
}
</style>